<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Bandit-Blog前台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap-grid.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/show.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css">
</head>

<body>
<%
    request.setAttribute("index","layui-this");
%>
<input hidden="hidden" value="${pageInfo.sum}" id="count">
<input hidden="hidden" value="${pageInfo.pageSize}" id="limit">
<c:import url="commons/header.jsp"></c:import>

<!-- 内容 -->
<div class="layui-container" style="height: auto">

    <!-- 上边界 -->
    <div class="layui-edge-top"> </div>
    <div class="layui-edge-top layui-show-sm-block layui-hide-lg"></div>

    <!-- layui第一行 -->
    <div class="layui-row layui-show-lg-block layui-hide-xs">
        <!-- 日历 -->
        <div class="layui-col-sm3 layui-col-lg3">
            <div id="date"></div>
        </div>
        <!-- 轮播 -->
        <div class="layui-col-sm9 layui-col-lg9">
            <div class="layui-carousel" id="carouse">
                <div carousel-item style="height: 325px;">
                    <img src="../../static/pic/1.jpg">
                    <img src="../../static/pic/8.jpg">
                    <img src="../../static/pic/4.jpg">
                </div>
            </div>
        </div>
    </div>
    <br>
    <!-- laiui第二行 -->
    <div class="layui-row layui-col-space16">

        <!-- 内容左侧 -->
        <div class="layui-col-sm9 layui-col-lg9 layui-col-space3" >

            <div class="layui-col-sm12 layui-col-lg12" id="ajaxList">
            <!-- 一篇博客 -->
            <c:if test="${empty blogList}">
            <div class="layui-card">
                <div class="layui-card-body blog-body">
                    Null
                </div>
            </div>
            </c:if>

            <c:forEach items="${blogList}" var="blog">
            <div class="layui-card layui-anim layui-anim-scaleSpring">
                <div class="layui-card-body blog-body">
                    <div class="layui-col-lg12 layui-col-sm12 blog-title">
                        <a href="/toDetails?id=${blog.id}">
                            <p>${blog.title}</p>
                        </a>
                    </div>
                    <hr class="layui-border-box">
                    <div class="layui-col-lg12 layui-col-sm12 blog-summary">
                        <a href="/toDetails?id=${blog.id}">
                            <p>${blog.summary}</p>
                        </a>
                    </div>
                </div>
                <hr class="layui-border-box">
                <div class="blog-footer">
                    <i class="layui-icon">&#xe756;</i>${blog.clickHit}
                    <i class="layui-icon">&#xe611;</i>${blog.commentHit}
                </div>
            </div>
            </c:forEach>
            </div>
            <div id="laypage01"></div>

        </div>

        <!-- 内容右侧 -->
        <div class="layui-col-sm3 layui-col-lg3 layui-col-space3">

            <!-- 搜索框 -->
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-col-lg12 layui-col-sm12">
                        <form class="layui-form" action="/searchIndex">
                            <div class="layui-col-sm9 layui-col-lg9">
                                <div class="layui-form-item">
                                    <input type="text" class="layui-input" name="str" placeholder="全局搜索" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="layui-col-sm3 layui-col-lg3">
                                <button class="layui-btn layui-btn-warm" lay-submit="" lay-filter="search01">
                                    <i class="layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </form>
                    </div>
                    <br>
                    <div class="layui-show-lg-block" style="text-align: center">
                        <img src="${pageContext.request.contextPath}/static/pic/2头像.jpg" style="border-radius: 50%; width: 50%; height: 50%">
                    </div>
                    <div class="layui-show-lg-block" style="text-align: center">
                        <h3>化身强盗Bandit</h3>
                    </div>
                    <hr>
                    <div>
                        <p>The past is not my concern,the future is no longer my concern,either</p>
                    </div>


                </div>
            </div>

            <!-- 类型框 -->
            <div class="layui-card">
                <div class="layui-card-body body-card">
                    <p><i class="layui-icon">&#xe66e;</i>标签</p>
                    <hr class="layui-border-green">
                    <div class="layui-btn-container" id="btn"></div>
                </div>

            </div>

        </div>
    </div>

</div>
<br>
<c:import url="commons/footer.jsp"></c:import>

<!-- 脚本 -->
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/show.js"></script>
<script src="${pageContext.request.contextPath}/static/js/public.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util', 'laydate','carousel','form','laypage'], function () {
        var element = layui.element,
            laydate = layui.laydate,
            layer = layui.layer,
            util = layui.util,
            carousel = layui.carousel,
            form = layui.form,
            laypage = layui.laypage,
            $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            menuRight: function () {
                layer.open({
                    type: 1,
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt' //右上角
                    ,
                    anim: 5,
                    shadeClose: true
                });
            }
        });
        //日历
        laydate.render({
            elem: '#date',
            position: 'static',
            value: new Date(),
            calendar: true
        });
        //轮播
        carousel.render({
            elem: '#carouse',
            width: '100%', //设置容器宽度
            arrow: 'always' //始终显示箭头
            //anim: 'updown' //切换动画方式
        });
        //搜索框提交
        form.on('submit(search01)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        });
        //分页
        laypage.render({
            elem: 'laypage01' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: document.getElementById("count").value //数据总数，从服务端得到
            ,limit: document.getElementById("limit").value
            ,layout:['prev','page','next']
            ,jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                curr = obj.curr;

                //首次不执行
                if(!first){
                    //do something
                    $.ajax({
                        url: "${pageContext.request.contextPath}/setPage?currentPage="+obj.curr,
                        async:false,
                        contentType: "application/json",
                        type: "POST",
                        timeout:5000,
                        data: JSON.stringify({
                            currentPage: obj.curr
                        }),
                        dataType: 'json',     //此处应该是后端再次传回来的type
                        success(data){
                            console.log(data);
                            let blog_list = [];
                            for (let key in data.blogList){
                                let element = `
                                <div class="layui-card layui-anim layui-anim-scaleSpring">
                                    <div class="layui-card-body blog-body">
                                        <div class="layui-col-lg12 layui-col-sm12 blog-title">
                                            <a href="/toDetails?id=${"${data.blogList[key].id}"}">
                                                <p>${"${data.blogList[key].title}"}</p>
                                            </a>
                                        </div>
                                        <hr class="layui-border-box">
                                        <div class="layui-col-lg12 layui-col-sm12 blog-summary">
                                            <a href="/toDetails?id=${"${data.blogList[key].id}"}">
                                                <p>${"${data.blogList[key].summary}"}</p>
                                            </a>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="blog-footer">
                                    <i class="layui-icon">&#xe756;</i>${"${data.blogList[key].clickHit}"}
                                    <i class="layui-icon">&#xe611;</i>${"${data.blogList[key].commentHit}"}
                                    </div>
                                </div>
                            `
                                blog_list.push(element);
                            }
                            $('#ajaxList').empty().append(blog_list.join(''));

                        },
                        error(){
                            console.log("error")
                        }});
                }
            }
        });

    });

</script>
<script>
    function loadjscssfiles(filename, filetype) {
        if (filetype == "js") { // 判定文件类型
            var fileref = document.createElement('script')// 创建标签
            fileref.setAttribute("type", "text/javascript")// 定义属性type的值为text/javascript
            fileref.setAttribute("src", filename)// 文件的地址
        } else if (filetype == "css") { // 判定文件类型
            var fileref = document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
        }
        if (typeof fileref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref)
    }
</script>
<script>
    $(function () {
        //查询标签
        $.ajax({
            url:"${pageContext.request.contextPath}/queryBlogType",
            dataType: 'json',
            success(data) {
                console.log(data);
                let type_List = [];
                for (let key in data.typeList){
                    let element = `
                            <button type="button" class="layui-btn-sm layui-btn-radius layui-btn" onclick='window.location.href="/toType?id=${"${data.typeList[key].id}"}"'>${"${data.typeList[key].typeName}"}</button>
                            `
                    type_List.push(element);
                }
                $('#btn').empty().append(type_List.join(''));
                loadjscssfile('${pageContext.request.contextPath}/static/js/show.js','js');
                loadjscssfile('${pageContext.request.contextPath}/static/css/show.css','css');
            }
        })
    })
</script>
</body>